<template>
    <h3>部门详情</h3>
    
        <form class="form">
            <label>ID:
               <input type="text" v-model=state.deptinfo.id disabled> 
            </label>

             <label>部门名称:
               <input type="text" v-model=state.deptinfo.name> 
            </label>

            <label>部门电话:
               <input type="text" v-model=state.deptinfo.tel> 
            </label>

            <label>部门负责人:
               <input type="text" v-model=state.deptinfo.principal> 
            </label>
            <label>负责人电话:
               <input type="text" v-model=state.deptinfo.principal_tel> 
            </label>

        </form>
     
    <button>更新</button>   
    <button>返回</button>
</template>

<script setup>
import { onMounted,inject,reactive} from 'vue';
import { useRoute,useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()

//  $http 就是我们的axios对象
const $http = inject('$http')

// 部门详情数据
const state = reactive({
    deptinfo: {},
})


// 根据id获取部门详情
const getDeptInfo = async () => {
    const result = await $http.get(`/dep/${route.params.id}`)
    // console.log(result.data.data);
    if (result.data.data != null)  {
        state.deptinfo = result.data.data
    } else {
        alert("没有数据")
    }
     
}



onMounted(() => {
    getDeptInfo()
})

// 根据id删除部门数据
// 。。。。
// 。。。
// 。。。

</script>

<style scoped>
.form {
    width: 300px;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
  
}
</style>